<template>
  <el-card class="box-card">
    <el-form :label-position="labelPosition">
      <el-row :gutter="15" >
        <el-col :span="4" v-for="(item, index) in filedTypeList" :key="item.field + index">
          <el-form-item v-if="item.type == 'text'" :label="item.label">
            <el-input v-model="form[item.field]" :placeholder="item.placeholder != '' ? item.placeholder : '请输入字符串'"/>
          </el-form-item>
          <el-form-item v-if="item.type == 'select'" :label="item.label">
            <el-select
                v-model="form[item.field]"
                :placeholder="item.placeholder != '' ? item.placeholder : '请选择'"
            >
              <el-option
                  v-for="(opt, ind) in item.option"
                  :key="opt.label+opt.value"
                  :label="opt.label"
                  :value="opt.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="item.type == 'date'" :label="item.label">
            <el-date-picker
                v-model="form[item.field]"
                type="date"
                :placeholder="item.placeholder != '' ? item.placeholder : '请选择日期'"
                style="width: 100%"
            />
          </el-form-item>
          <el-form-item  v-if="item.type == 'checkbox'" :label="item.label">
            <el-checkbox-group v-model="form[item.field]">
              <el-checkbox
                  v-for="(che, ind) in item.checkbox"
                  :label="che.label"
                  :name="item.field"
              />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item v-if="item.type == 'radio'" :label="item.label">
            <el-radio-group v-model="form[item.field]">
              <el-radio v-for="(rad, ind) in item.radio" :label="rad.label" />
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider style="margin: 0" />
      <el-row class="mb-4" style="margin-top: 15px">
        <el-button type="primary"><el-icon><Search /></el-icon>搜索</el-button>
        <el-button>重置</el-button>
      </el-row>
    </el-form>
  </el-card>
</template>
<script lang="ts" setup>
import { ref, reactive, toRefs, defineProps, PropType } from "vue";
interface fileList {
  field: String;
  label: String;
  type: String;
  option?: [{ label: String; value: String }];
  checkbox?: [{ label: String; value: String }];
  radio?: [{ label: String }];
}

const labelPosition = ref('top')

const props = defineProps({
  filedTypeList: Array as PropType<Array<fileList>>,
});
console.log(props);
const checkboxKey = ref([]);
const formField = () => {
  const file = props.filedTypeList;
  console.log("file", file[0], file?.length);
  const obj = {};
  for (let i = 0; i < file.length; i++) {
    console.log(file[i].field);
    if (file[i].type == "checkbox") {
      obj[file[i].field] = [];
      checkboxKey.value.push(file[i].field);
    } else {
      obj[file[i].field] = "";
    }
  }
  return obj;
};
const form = reactive(formField());

const searchValue = () => {
  console.log("搜索", form);
  emit("emitSearch", form);
};
const resetSearchValue = () => {
  console.log("搜索", form);
  for (let key in form) {
    if (checkboxKey.value.indexOf(key) > -1) {
      form[key] = [];
    } else {
      form[key] = "";
    }
  }
};

const emit = defineEmits(["emitSearch"]);


//示例数据
// const filedTypeList = ref([
//   {
//     field: "name",
//     label: "姓名",
//     type: "text",
//   },
//   {
//     field: "phone",
//     label: "日期",
//     type: "date",
//   },
//   {
//     field: "select",
//     label: "选择框",
//     type: "select",
//     option: [
//       {
//         label: "Zone one",
//         value: "shanghai", //选择的真正值
//       },
//       {
//         label: "Zone two",
//         value: "beijing",
//       },
//     ],
//   },
//   {
//     field: "checkbox",
//     label: "多选",
//     type: "checkbox",
//     checkbox: [
//       {
//         label: "one",
//         value: "1",
//       },
//       {
//         label: "two",
//         value: "2",
//       },
//       {
//         label: "three",
//         value: "3",
//       },
//       {
//         label: "four",
//         value: "4",
//       },
//     ],
//   },
//   {
//     field: "radio",
//     label: "单选",
//     type: "radio",
//     radio: [
//       {
//         label: "Sponsor",
//       },
//       {
//         label: "sad",
//       },
//     ],
//   },
// ]);
</script>
<style lang="less" scoped>

</style>
